<template>
    <div style="padding:20px">
        <div class="title">{{ data.title }}</div>
        <div class="er">
            <span>分类：{{ data.cname }}</span>
            <span>用户：{{ data.time }}</span>
            <span>{{ data.uname }}</span>
            <el-button type="primary" size="mini" style="margin-left: 20px;" @click="xiazai">下载附件</el-button>
        </div>
        <div style="font-size: 16px;margin-bottom:20px">浏览数：{{ data.liulan }}</div>
        <img style="width: 100%;" :src="data.img" alt="">
        <div style="margin:20px 0">{{ data.content }}</div>
        <div class="dingwei">
            <div @click="dingcai(1)">
                <svg v-if="data.isDing" t="1739177843152" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="8960" width="70" height="70">
                    <path
                        d="M411.904 153.728c19.797333-63.232 54.186667-90.24 122.026667-70.656l1.706666 0.554667c19.84 6.101333 42.666667 17.706667 64.085334 37.162666 33.706667 30.72 53.76 73.301333 53.76 126.805334 0 47.786667-2.773333 77.312-10.88 110.805333l-0.256 0.938667h175.488c107.264 0 149.888 72.362667 122.922666 192.682666l-2.304 9.856-5.461333 18.005334-20.608 67.114666-9.642667 30.677334-9.173333 28.672-17.066667 51.626666-11.648 33.621334-7.210666 20.053333-9.984 26.368-6.101334 15.232c-29.525333 71.253333-90.453333 103.978667-170.112 94.592l-387.114666-28.8a587.690667 587.690667 0 0 0-7.381334-0.341333l-15.36-0.341334H218.026667l-12.501334-0.213333-9.984-0.426667-8.32-0.768-3.712-0.554666-7.125333-1.408-11.52-3.029334c-59.349333-17.621333-90.24-67.925333-90.24-139.605333v-283.52c0-90.538667 54.954667-142.208 148.565333-142.208l75.776-0.042667 5.205334-3.968a293.632 293.632 0 0 0 72.234666-88.32l6.101334-11.946666c6.101333-12.544 11.093333-25.685333 15.829333-41.002667l0.768-2.602667z m88.661333 8.064c-1.834667-0.426667-2.645333 0.170667-3.541333 2.773333l-3.882667 14.933334-10.666666 38.442666-2.56 8.533334a366.933333 366.933333 0 0 1-20.565334 53.162666 387.754667 387.754667 0 0 1-72.618666 102.442667 333.141333 333.141333 0 0 1-49.28 42.026667l5.504-3.925334v417.408l336.682666 25.344c41.898667 4.906667 65.621333-6.101333 80.213334-36.096l2.858666-6.229333 5.76-14.378667 9.514667-25.173333 6.912-19.285333 11.221333-32.469334 8.064-24.064 17.365334-53.76 19.2-61.354666 15.445333-50.858667c18.986667-76.074667 7.808-94.592-38.357333-94.592h-217.685334a53.632 53.632 0 0 1-50.730666-71.125333l2.176-6.4 3.328-10.922667c10.282667-35.754667 13.226667-59.136 13.226666-108.629333 0-48.426667-26.88-72.96-57.045333-82.261334l-3.712-1.152z m-242.944 270.122667h-34.389333c-47.616 0-63.232 14.72-63.232 56.917333v283.52c0 38.016 9.941333 53.333333 33.792 59.008l1.493333 0.341333 3.754667 0.554667 5.12 0.426667 11.562667 0.256h28.586666l13.312 0.085333v-401.066667z"
                        fill="#1296db" p-id="8961"></path>
                </svg>
                <svg v-else t="1739177130341" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="6836" width="70" height="70">
                    <path
                        d="M411.904 153.728c19.797333-63.232 54.186667-90.24 122.026667-70.656l1.706666 0.554667c19.84 6.101333 42.666667 17.706667 64.085334 37.162666 33.706667 30.72 53.76 73.301333 53.76 126.805334 0 47.786667-2.773333 77.312-10.88 110.805333l-0.256 0.938667h175.488c107.264 0 149.888 72.362667 122.922666 192.682666l-2.304 9.856-5.461333 18.005334-20.608 67.114666-9.642667 30.677334-9.173333 28.672-17.066667 51.626666-11.648 33.621334-7.210666 20.053333-9.984 26.368-6.101334 15.232c-29.525333 71.253333-90.453333 103.978667-170.112 94.592l-387.114666-28.8a587.690667 587.690667 0 0 0-7.381334-0.341333l-15.36-0.341334H218.026667l-12.501334-0.213333-9.984-0.426667-8.32-0.768-3.712-0.554666-7.125333-1.408-11.52-3.029334c-59.349333-17.621333-90.24-67.925333-90.24-139.605333v-283.52c0-90.538667 54.954667-142.208 148.565333-142.208l75.776-0.042667 5.205334-3.968a293.632 293.632 0 0 0 72.234666-88.32l6.101334-11.946666c6.101333-12.544 11.093333-25.685333 15.829333-41.002667l0.768-2.602667z m88.661333 8.064c-1.834667-0.426667-2.645333 0.170667-3.541333 2.773333l-3.882667 14.933334-10.666666 38.442666-2.56 8.533334a366.933333 366.933333 0 0 1-20.565334 53.162666 387.754667 387.754667 0 0 1-72.618666 102.442667 333.141333 333.141333 0 0 1-49.28 42.026667l5.504-3.925334v417.408l336.682666 25.344c41.898667 4.906667 65.621333-6.101333 80.213334-36.096l2.858666-6.229333 5.76-14.378667 9.514667-25.173333 6.912-19.285333 11.221333-32.469334 8.064-24.064 17.365334-53.76 19.2-61.354666 15.445333-50.858667c18.986667-76.074667 7.808-94.592-38.357333-94.592h-217.685334a53.632 53.632 0 0 1-50.730666-71.125333l2.176-6.4 3.328-10.922667c10.282667-35.754667 13.226667-59.136 13.226666-108.629333 0-48.426667-26.88-72.96-57.045333-82.261334l-3.712-1.152z m-242.944 270.122667h-34.389333c-47.616 0-63.232 14.72-63.232 56.917333v283.52c0 38.016 9.941333 53.333333 33.792 59.008l1.493333 0.341333 3.754667 0.554667 5.12 0.426667 11.562667 0.256h28.586666l13.312 0.085333v-401.066667z"
                        fill="#000000" p-id="6837"></path>
                </svg>
                <div>{{ data.ding }}</div>
            </div>
            <div @click="dingcai(2)">
                <svg v-if="data.isCai" t="1739177873505" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="10036" width="60" height="60">
                    <path
                        d="M300 608.864V88h477.916c25.815 0 41.979 5.525 51.808 14.617 6.238 6.125 9.602 13.574 10.735 20.38l0.438 2.633 92.314 402.165 0.176 0.712c5.816 23.53 1.843 43.53-10.447 59.143-9.517 11.702-32.017 21.182-59.61 21.182H546.349l72.213 130.586c7.856 14.206 15.912 31.605 23.947 53.053 10.618 28.344 20.148 61.09 28.115 98.645 0.036 0.32-0.053 0.518-0.461 1.612-1.324 3.544-4.218 8.523-9.47 15.814C644.654 926.839 623.467 936 594.813 936c-18.135 0-28.537-4.288-37.618-12.874-8.405-7.946-14.718-17.855-25.561-39.254l-5.634-11.118-5.344-5.732c-0.433-0.72-0.918-1.551-1.444-2.474-1.787-3.135-7.986-14.904-10.1-18.652l0.01-0.006c-25.204-43.028-36.934-62.463-52.366-85.841-21.447-32.49-42.12-59.384-64.482-82.682-28.251-29.434-58.872-52.508-92.273-68.503z m-88-24.668a289.824 289.824 0 0 0-29.43-1.476H97.667c-6.617 0-8.667-2.052-8.667-8.768V96.256C89 90.049 91.054 88 97.667 88H212v496.196z m483.57 112.636h167.76c53.193 0 101.27-20.48 128.379-54.272 29.665-37.376 39.382-85.504 27.107-135.168l-91.552-398.848c-2.557-15.36-10.74-44.544-36.826-69.632C863.331 13.312 825.482 0 777.916 0H97.667C42.429 0 1 41.472 1 96.256v477.696c0 55.296 41.429 96.768 96.667 96.768h84.903c121.729 0 184.64 107.008 250.618 219.648 1.535 2.56 12.787 25.6 19.947 33.28C471.037 958.976 504.282 1024 594.811 1024c55.239 0 101.782-20.992 135.027-60.928 17.39-23.552 34.268-52.224 27.108-89.088-7.304-34.634-15.547-64.206-23.833-89.152l-37.543-88z"
                        fill="#1296db" p-id="10037"></path>
                </svg>
                <svg v-else t="1739177098628" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5832" width="60" height="60">
                    <path
                        d="M300 608.864V88h477.916c25.815 0 41.979 5.525 51.808 14.617 6.238 6.125 9.602 13.574 10.735 20.38l0.438 2.633 92.314 402.165 0.176 0.712c5.816 23.53 1.843 43.53-10.447 59.143-9.517 11.702-32.017 21.182-59.61 21.182H546.349l72.213 130.586c7.856 14.206 15.912 31.605 23.947 53.053 10.618 28.344 20.148 61.09 28.115 98.645 0.036 0.32-0.053 0.518-0.461 1.612-1.324 3.544-4.218 8.523-9.47 15.814C644.654 926.839 623.467 936 594.813 936c-18.135 0-28.537-4.288-37.618-12.874-8.405-7.946-14.718-17.855-25.561-39.254l-5.634-11.118-5.344-5.732c-0.433-0.72-0.918-1.551-1.444-2.474-1.787-3.135-7.986-14.904-10.1-18.652l0.01-0.006c-25.204-43.028-36.934-62.463-52.366-85.841-21.447-32.49-42.12-59.384-64.482-82.682-28.251-29.434-58.872-52.508-92.273-68.503z m-88-24.668a289.824 289.824 0 0 0-29.43-1.476H97.667c-6.617 0-8.667-2.052-8.667-8.768V96.256C89 90.049 91.054 88 97.667 88H212v496.196z m483.57 112.636h167.76c53.193 0 101.27-20.48 128.379-54.272 29.665-37.376 39.382-85.504 27.107-135.168l-91.552-398.848c-2.557-15.36-10.74-44.544-36.826-69.632C863.331 13.312 825.482 0 777.916 0H97.667C42.429 0 1 41.472 1 96.256v477.696c0 55.296 41.429 96.768 96.667 96.768h84.903c121.729 0 184.64 107.008 250.618 219.648 1.535 2.56 12.787 25.6 19.947 33.28C471.037 958.976 504.282 1024 594.811 1024c55.239 0 101.782-20.992 135.027-60.928 17.39-23.552 34.268-52.224 27.108-89.088-7.304-34.634-15.547-64.206-23.833-89.152l-37.543-88z"
                        fill="#000000" p-id="5833"></path>
                </svg>
                <div>{{ data.cai }}</div>
            </div>
        </div>
        <div style='border:5px solid red; border-radius:20px;margin-top:20px'>
            <h1>评论</h1>
            <div style="display:flex;margin-top:20px">
                <el-input v-model='content' placeholder="请输入评论"></el-input>
                <el-button type="primary" @click='send'>发送</el-button>
            </div>
            <div class='list'>
                <div class='item' v-for='v in pinglunList' :key='v.id'>
                    <div>
                        <div>
                            <img style="width: 40px;height: 40px;border-radius: 50%;" :src="v.startAvatar" alt="">

                            {{ v.startName }}
                            <span v-if='v.startId == $store.state.user.id' style='color:#36d'>(我)</span>
                        </div>
                        <div>{{ v.content }}</div>
                        <div class='date'>{{ v.createTime }}
                            <span style='cursor: pointer;' @click='huifu(v)'>回复</span>
                        </div>
                    </div>
                    <div style="display:flex;margin-top:20px" v-show='v.show'>
                        <el-input v-model='v.value' :placeholder="yiPla">
                            <el-button slot="append" icon="el-icon-close" @click='v.show = false'></el-button>
                        </el-input>
                        <el-button type="primary" @click='send(v)'>发送</el-button>
                    </div>
                    <div style='padding-left:20px;padding-top:20px'>
                        <div v-for='vv in v.children' :key='vv.id' style='margin-bottom:20px'>
                            <div v-if='vv.endId == v.startId'>
                                <img style="width: 40px;height: 40px;border-radius: 50%;" :src="vv.startAvatar" alt="">
                                {{ vv.startName }} <span v-if='vv.startId == $store.state.user.id'
                                    style='color:#36d'>(我)</span>
                                <span>:{{ vv.content }}</span>
                            </div>
                            <div v-else>
                                <img style="width: 40px;height: 40px;border-radius: 50%;" :src="vv.startAvatar" alt="">
                                {{ vv.startName }} <span v-if='vv.startId == $store.state.user.id'
                                    style='color:#36d'>(我)</span> 回复
                                <img style="width: 40px;height: 40px;border-radius: 50%;" :src="vv.endAvatar" alt="">
                                <span style="color:#36d">{{ vv.endName }}
                                    <span v-if='vv.endId == $store.state.user.id' style='color:#36d'>(我)</span>
                                </span>:
                                <span>{{ vv.content }}</span>
                            </div>

                            <div class='date'>{{ vv.createTime }}
                                <span style='cursor: pointer;' @click='huifuu(vv)'
                                    v-if='vv.startId != $store.state.user.id'>回复</span>
                            </div>
                            <div style="display:flex;margin-top:20px" v-show='vv.show'>
                                <el-input v-model='vv.value' :placeholder="erPla">
                                    <el-button slot="append" icon="el-icon-close" @click='vv.show = false'></el-button>
                                </el-input>
                                <el-button type="primary" @click='send2(v, vv)'>发送</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import api from "@/api/index"
export default {
    data(){
        return {
            data:{},
            pinglunList:[],
            content:'',
            erPla:'',
            yiPla:'',
        }
    },
    mounted(){
        this.getList()
        api.gettieziById(this.$route.query.id).then(res=>{
            this.data=res.data
        })
    },
    methods:{
        huifu(v) {
            this.pinglunList.forEach(item => {
                this.$set(item, 'show', false)
                console.log(item)
            })
            this.$nextTick(() => {
                this.$set(v, 'show', true)
            })
            this.yiPla = "回复" + v.startName
        },
        send(v) {
            let data = {
                startId: this.$store.state.user.id,
                startName: this.$store.state.user.name,
                pid: v.id || 0,
                content: v.value || this.content,
                tid: this.$route.query.id,
                endId: v.startId,
                endName: v.startName
            }
            console.log(data)
            api.addPinglun(data).then(res => {
                if (res.code == 200) {
                    if (v.id) {
                        v.children.push(res.data)
                        v.show = false
                        v.value = ''
                    } else {
                        this.pinglunList.push(res.data)

                        this.content = ''
                    }
                    this.$message({
                        message: '评论成功',
                        type: 'success'
                    });
                }
            })
        },
        huifuu(vv) {
            this.pinglunList.forEach(item => {
                item.children.forEach(itemm => {

                    this.$set(itemm, 'show', false)
                })
                console.log(item)
            })
            this.$set(vv, 'show', true)
            this.erPla = "回复" + vv.startName
        },
        send2(v, vv) {
            let data = {
                startId: this.$store.state.user.id,
                startName: this.$store.state.user.name,
                pid: v.id,
                content: vv.value,
                tid: this.$route.query.id,
                endId: vv.startId,
                endName: vv.startName
            }
            api.addPinglun(data).then(res => {
                if (res.code == 200) {
                    v.children.push(res.data)
                    vv.value = ''
                    vv.show = false
                    this.$message({
                        message: '评论成功',
                        type: 'success'
                    });
                }
            })
        },
        getList() {
            api.getpinglunList({
                tid: this.$route.query.id
            }).then(res => {
                this.pinglunList = res.data
                console.log(res)
            })
        },
        xiazai(){
            api
        .dowlon({
          name: this.data.furl.split("name=")[1],
        })
        .then((res) => {
          const blob = new Blob([res]);
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", this.data.furl.split("name=")[1]);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        });
        },
        dingcai(t) {
            if (!this.$store.state.user.id) {
                return this.$message({
                    message: '请先登录',
                    type: 'warning'
                });
            }
            //顶
            if (t == 1) {
                if (this.data.isDing) {

                    //取消顶请求
                    api.dingcairemove({
                        uid: this.$store.state.user.id,
                        tid: this.$route.query.id,
                        type: 1
                    }).then(res => {
                        this.data.isDing = false
                        this.data.ding--
                    })
                } else {
                    api.dingcaiadd({
                        uid: this.$store.state.user.id,
                        tid: this.$route.query.id,
                        type: 1
                    }).then(res => {
                        this.data.isDing = true
                        this.data.ding++
                    })

                    //顶请求
                    if (this.data.isCai) {
                        this.dingcai(2)
                    }
                }
            } else {
                if (this.data.isCai) {
                    api.dingcairemove({
                        uid: this.$store.state.user.id,
                        tid: this.$route.query.id,
                        type: 2
                    }).then(res => {
                        this.data.isCai = false
                        this.data.cai--
                    })

                    //取消踩请求
                } else {
                    //踩请求
                    api.dingcaiadd({
                        uid: this.$store.state.user.id,
                        tid: this.$route.query.id,
                        type: 2
                    }).then(res => {
                        this.data.isCai = true
                        this.data.cai++
                    })

                    if (this.data.isDing) {
                        this.dingcai(1)
                    }
                }
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.title{
    font-size: 18px;
}
.er{
    margin-bottom: 20px;
    margin-top: 20px;
font-size: 14px;
>span:nth-child(2){
    margin: 0 20px;
}
}
.list {
    margin-top: 20px;
    padding: 20px;
    font-size: 20px;

    .item {
        margin-bottom: 60px
    }
}.date {
    color: #666;
    font-size: 16px
}

.dingwei {
    position: fixed;
    left: 80px;
    top: 200px;

    >div {
        display: flex;
        font-size: 26px;
        margin-top: 60px;
        cursor: pointer;
        align-items: flex-end;
    }
}
</style>